<!-- 基本表格 -->
<template>
	<div>
		<el-form ref="formRef" :model="form" inline-message status-icon>
			<el-row class="row_wrap">
				<el-col
					class="col_wrap"
					:span="item.inputSpan || 12"
					v-for="item in formConfig"
					:key="item.prop"
				>
					<el-form-item
						:label="item.label"
						:prop="item.prop"
						:label-width="120 + 36"
						:rules="item.rules || []"
						:class="{ Icon: item.type == 'Icon' }"
					>
						<FormType :config="item" :form="form" />
					</el-form-item>
				</el-col>
				<el-col class="col_wrap btn_wrap" :span="24">
					<el-button @click="saveClick(formRef)" type="primary">保存</el-button>
					<el-button @click="cancelClick" type="primary">取消</el-button>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { FormInstance } from "element-plus";
import { watchEffect } from "vue";
import { ref, watch } from "vue";

const emits = defineEmits(["returnData"]);
const props = defineProps({
	formConfig: { type: Array, default: () => [] },
	form: { type: Object, required: true }
});

console.log(props, "props");
const formRef = ref(null);
/**
 * 定义 form 表单
 */
watchEffect(() => {
	console.log("form------form");
	props.formConfig.forEach((item) => {
		props.form[item.prop] = props.form[item.default] || "";
	});
});

/**
 * 点击保存
 */
const saveClick = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			emits("returnData", { btnType: "create" });
			console.log("submit!", valid);
		} else {
			console.log("error submit!", valid);
			return false;
		}
	});
};
/**
 * 点击取消
 */
const cancelClick = () => {
	emits("returnData", { btnType: "cancel" });
};
</script>

<style lang="less" scoped>
:deep(.el-form-item) {
	margin-bottom: 0;
	&.Icon {
		.el-form-item__error {
			right: calc(33px + 40px);
		}
	}
}
:deep(.el-form-item__error) {
	position: absolute;
	right: 33px;
	padding: 0;
	height: 0;
	line-height: 0;
}
.row_wrap {
	border-bottom: 1px solid #8890b8;
	border-right: 1px solid #8890b8;
	.col_wrap {
		border-top: 1px solid #8890b8;
		border-left: 1px solid #8890b8;
		background-color: #ababc62e;
		&.btn_wrap {
			text-align: center;
			padding: 2px;
		}
	}
}
</style>
